<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0);
const proCount = reactive({
  name: '小A',
  age: 1,
  address: {
    propa: '北京',
    propb: '上海'
  }
})
const count2 = ref(10);
// const text = count2.value + '文字'
const text = ref(count2.value + '文字');

const btnClick = () => {
  count.value++;
  count2.value = count2.value + 2;
};
// watch(count, (val: number) => {
//   console.log('count: ', val);
// })
watch(() => proCount.address, val => {
  console.log('val: ', val);
},
  {
    deep: true,
  },
)
// watch(proCount, (val, oldVal) => {
//   console.log('val: ', val);
//   console.log('oldVal: ', oldVal.name);
// })

const changeCount = (val) => {
  count.value = val;
}
//子组件暴露给父组件
defineExpose({
  count,
  changeCount,
})
onMounted(() => {
  // console.log('count2: ', count2);
});
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <el-button type="primary" @click="btnClick">count is {{ count }}</el-button>
    <p class="pText">{{ count2 }}</p>
    <p class="pText2">{{ text }}</p>
  </div>
</template>

<style scoped lang="scss">
.card {
  border: 1px solid #ccc;

  .pText {
    color: #ccc;
    font-size: 1rem;
  }

  .pText2 {
    color: #ff0000;
    font-size: 1em;
  }
}
</style>
